<template>
  <div id="generateContract">
    <!-- contract content -->
    <div class="contract-content" >
      <div v-html="contractContent"></div>
      <!-- <contract :contractDetail="orderInfo"/> -->
    </div>
    <div class="tip-btn">
      <!-- CheckBox -->
      <div class="contract-checkbox">
        <input type="checkbox" id="contractSubmit" name="contractSubmit" v-model="checked">
        <label for="contractSubmit"></label>
        <span>
          &nbsp;请认真研读以上合同，选中表示您已同意此合同条款。
        </span>
      </div>
      <!-- button -->
      <div class="btns">
        <div class="foot-btn border-top" @click.stop="cancleContract">
          <p>取消签约</p>
        </div>
        <div v-if="!checked" class="foot-btn sign-btn" @click.stop="confirmContract">
          <p>确定签约</p>
        </div>
        <div v-if="checked" class="foot-btn sign-btn" style="background: #ff9600;" @click.stop="confirmContract">
          <p>确定签约</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import contract from '@/components/contract'
export default {
  components: {
    contract
  },
  data () {
    return {
      checked: '',
      contractContent: '',
      houseInfo: '',
      userInfo: '',
      leaseInfo: '',
      tenantsInfo: ''
    }
  },
  created () {
    this.houseInfo = JSON.parse(window.localStorage.getItem('signHouseInfo') || '{}')
    this.userInfo = JSON.parse(window.localStorage.getItem('userInfo') || '{}')
    this.leaseInfo = JSON.parse(window.localStorage.getItem('leaseInfo') || '{}')
    this.tenantsInfo = window.localStorage.getItem('tenantsInfo') || ''
    this.newContract()
  },
  methods: {
    beforeSubmit () {
      // 验证前需要勾选同意服务条款
      if (!this.checked) {
        this.$vux.toast.text('请勾选同意合同条款')
        return false
      }
      return true
    },
    // 确认签约合同
    confirmContract () {
      if (!this.beforeSubmit()) return // 提交前验证
      let requestData = {
        id: this.houseInfo.houseId,
        renter: this.tenantsInfo, // 租客
        detail: this.contractContent, // 合同详情
        renterType: this.leaseInfo.periodValue, // 租期
        moneyType: this.leaseInfo.payment || 1, // 付款方式
        payPeriodType: this.houseInfo.betNum || 1, // 押金方式
        startDate: this.leaseInfo.startDate, // 开始时间
        endDate: this.leaseInfo.endDate // 结束时间
      }
      this.$axiosPosting(this.$api.insertNewContract, requestData).then(res => {
        if (res.code === '0000') {
          let _this = this
          _this.$vux.confirm.show({
            title: '申请成功，等待房东确认签约',
            confirmText: '稍后去看',
            cancelText: '去个人中心',
            content: '您可以在“个人中心”切换成租客身份，查看您的订单进行跟踪和操作！',
            onConfirm () {
              _this.$router.push({ path: '/rentList' })
            },
            onCancel () {
              _this.$router.push({ path: '/user' })
            }
          })
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
      // console.log('确认合同')
    },
    // 取消合同签约
    cancleContract () {
      let _this = this
      _this.$vux.confirm.show({
        title: '温馨提示',
        content: '您确定取消签约吗？',
        onConfirm () {
          console.log('sss')
          _this.$router.push({ path: '/detail', query: {id: _this.houseInfo.houseId} })
        }
      })
    },
    newContract () {
      let requestData = {
        id: this.houseInfo.houseId,
        yName: this.userInfo.trueName,
        yCard: this.userInfo.idCard,
        yPhone: this.userInfo.mobile,
        startDate: this.leaseInfo.startDate,
        endDate: this.leaseInfo.endDate,
        type: this.houseInfo.betNum || 1
      }
      this.$axiosPosting(this.$api.queryNewContractByContent, requestData).then(res => {
        if (res.code === '0000') {
          this.contractContent = res.data.content
          // this.$vux.toast.text('合同获取成功！')
        } else {
          this.$vux.toast.text(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less">
  #generateContract{
    .contract-content{
      height: calc(100%-95);
      overflow: scroll;
      padding: 0 15px;
      margin-bottom: 95px;
    }
    .tip-btn{
      position: fixed;
      z-index: 10;
      bottom: 0;
      left: 0;
      right: 0;
      .contract-checkbox{
        background: #fff;
        padding: 0 15px;
        font-size: 12px;
        display: flex;
        box-shadow: 0px -2px 5px #eee;
        justify-content: flex-start;
        align-items: center;
        height: 50px;
      }
      .btns{
        display: flex;
        justify-content: space-between;
        text-align: center;
        height: 45px;
        .foot-btn{
          flex: 1;
          color:white;
          display: flex;
          border: 1px solid #ccc;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          font-size: 16px;
          box-sizing: border-box;
        }
        .border-top{
            background: #ff9600;
        }
        .sign-btn{
          background: #ffc776;
          color: #fff;
        }
      }
    }
  }
</style>
